<template>
  <div class="app-container">
    <el-table ref="table" :data="tableData" border highlight-current-row style="width: 100%">
      <el-table-column type="index" :label="$t('table.index')" :index="indexMethod" align="center" width="55"></el-table-column>
      <el-table-column prop="name" :label="$t('logger.name')"></el-table-column>
      <el-table-column prop="level" :label="$t('logger.level')">
        <template slot-scope="scope">
          <el-button :type="scope.row.level=='TRACE'?'primary':'default'" :disabled="scope.row.level=='TRACE'" size="small" @click="changeLevel(scope.row.name, 'TRACE')">TRACE</el-button>
          <el-button :type="scope.row.level=='DEBUG'?'success':'default'" :disabled="scope.row.level=='DEBUG'" size="small" @click="changeLevel(scope.row.name, 'DEBUG')">DEBUG</el-button>
          <el-button :type="scope.row.level=='INFO'?'info':'default'" :disabled="scope.row.level=='INFO'" size="small" @click="changeLevel(scope.row.name, 'INFO')">INFO</el-button>
          <el-button :type="scope.row.level=='WARN'?'warning':'default'" :disabled="scope.row.level=='WARN'" size="small" @click="changeLevel(scope.row.name, 'WARN')">WARN</el-button>
          <el-button :type="scope.row.level=='ERROR'?'danger':'default'" :disabled="scope.row.level=='ERROR'" size="small" @click="changeLevel(scope.row.name, 'ERROR')">ERROR</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { loadTableData, reloadTableData } from '@/utils/utils'
  import { fetchUpdate } from '@/api/restful'
  export default {
    data() {
      return {
        baseUrl: '/logger',
        tableData: [],
        total: 0,
        selectedRow: null,
        query: {}
      };
    },
    methods: {
      indexMethod(index) {
        return index+1;
      },
      load(){
        this.selectedRow = null;
        loadTableData.apply(this, [this.baseUrl+'/list']);
      },
      reload(){
        this.selectedRow = null;
        reloadTableData.apply(this, [this.baseUrl+'/list']);
      },
      changeLevel(name, level){
        fetchUpdate(this.baseUrl, {name: name, level: level}).then(response =>{
            if(response.data.success){
              this.reload();
            }
        })
      }
    },
    mounted: function () {
      this.load();
    }
  }
</script>
